<template>
    <el-aside width="200px">
        <div class="avatar">
            <el-avatar 
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" 
            :size="70"></el-avatar>
            <div class="sub-title">{{usr}}</div>
        </div>
        <el-menu
            class="el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#ffd04b"
            router>
            <el-menu-item index="/">
                <i class="el-icon-menu"></i>
                <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="/list">
                <i class="el-icon-document"></i>
                <span slot="title">成绩管理</span>
            </el-menu-item>
            <el-menu-item index="/students">
                <i class="el-icon-setting"></i>
                <span slot="title">学员管理</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>
<script>
export default {
    data(){
        return{
            usr:"admin"
        }
    }
}
</script>
<style>
.el-aside{
    color: #333;
    text-align: center;
    background-color:#304156;
}
.avatar{
    padding:30px 0;
}
.sub-title{
    padding: 10px 0;
    color: #fff;
}
.el-menu{
    border:none;
    background-color: inherit;
    text-align: left;
}
</style>